import { Tabs } from "antd"
import { useState } from "react"
import DnsPanel from "./components/DnsPanel"
import PingPanel from "./components/PingPanel"
import ScanPanel from "./components/ScanPanel"

function App() {
  const [activeKey, setActiveKey] = useState("dns")

  return (
    <div>
      <Tabs type="card" activeKey={activeKey} onChange={value => setActiveKey(value)}>
        <Tabs.TabPane tab="网络解析" key="dns">
          {activeKey == "dns" && (<DnsPanel/>)}
        </Tabs.TabPane>
        <Tabs.TabPane tab="ping" key="ping">
        {activeKey == "ping" && (<PingPanel/>)}
        </Tabs.TabPane>
        <Tabs.TabPane tab="端口扫描" key="scan">
        {activeKey == "scan" && (<ScanPanel/>)}
        </Tabs.TabPane>
      </Tabs>
    </div>
  )
}

export default App
